<template>
	<view class="wrap">
		<u-cell-group>
			<u-cell title="目标日期">
				<template #value>
					<picker mode="date" :value="date" @change="e=>date=e.detail.value">
						<view class="btn">{{ date }}</view>
					</picker>
				</template>
			</u-cell>
		</u-cell-group>
		<view class="card left">
			<view class="big">{{ remainDays }} 天</view>
			<view class="sub">剩余</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch
	} from 'vue'
	const date = ref('2025-12-31')
	onMounted(() => {
		const d = uni.getStorageSync('countdown_date');
		if (d) date.value = d
	})
	watch(date, (v) => uni.setStorageSync('countdown_date', v))
	const remainDays = computed(() => {
		const end = new Date(date.value).getTime()
		const today = new Date(new Date().toDateString()).getTime()
		return Math.max(Math.ceil((end - today) / 86400000), 0)
	})
</script>
<style scoped>
	.wrap {
		padding: 8rpx
	}

	.card.left {
		margin: 16rpx;
		padding: 24rpx
	}

	.big {
		font-size: 64rpx;
		font-weight: 800;
		color: #138DD0;
	}

	.sub {
		color: #888
	}
</style>
